{include file="public/header" /}
<link rel="stylesheet" href="/static/admin/css/productEdit.css" media="all">
<style>
    .fairy-sku-table {
        width: 1800px !important;
    }
</style>
<body>
<div class="x-body layui-anim" style="padding-top: 0">
    <form class="layui-form" id="form" action="{:url('addSave')}">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">商品信息</li>
                <li>商品规格</li>
                <li>商品图片</li>
                <li>商品详情</li>
                <!--{if isset($info)}
                <li>供应链会员</li>
                {/if}-->
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item" data-url="{:url('ProductCate/getCate')}">
                        <label class="layui-form-label">所属商家</label>
                        <div class="layui-input-inline">
                            <select name="business_id" id="business_id" lay-filter="business_id" lay-verify="required" lay-reqtext="请选择所属商家">
                                <option value="">请选择</option>
                                {foreach name="business" item="vo"}
                                <option value="{$vo.id}" >{$vo.title}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">商品名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" lay-verify="required" lay-reqtext="请填写商品名称"
                                   placeholder="请填写商品名称" class="layui-input" value="{$info?$info.title:''}"/>
                        </div>
                    </div>

                    <div class="layui-form-item" data-url="{:url('ProductCate/getCate')}">
                        <label class="layui-form-label">所属分类</label>
                        <div class="layui-input-inline">
                            <select name="cate_1" id="cate_1" lay-filter="cate_1" lay-verify="required"
                                    lay-reqtext="请选择所属分类">
                                <option value="">请选择</option>
                                {foreach name="cate" item="vo"}
                                <option value="{$vo.id}" {if isset($info) && $info.cate_1 == $vo.id}selected{/if}>{$vo.title}</option>
                                {/foreach}
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select data-id="{$info?$info.cate_2:''}" id="cate_2" name="cate_2" lay-filter="cate_2"
                                    lay-verify="required" lay-reqtext="请选择所属分类"></select>
                        </div>
                        <div class="layui-input-inline">
                            <select data-id="{$info?$info.cate_3:''}" id="cate_3" name="cate_3" lay-filter="cate_3"
                                    lay-verify="required" lay-reqtext="请选择所属分类"></select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-inline">
                            <input type="number" name="sort" autocomplete="off" placeholder="请输入排序，越小越靠前" class="layui-input" value="{$info?$info.sort:''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">按活动排序</label>
                        <div class="layui-input-inline">
                            <input type="number" name="activity_sort" autocomplete="off" placeholder="请输入排序，越小越靠前" class="layui-input" value="{$info?$info.activity_sort:''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">按热门排序</label>
                        <div class="layui-input-inline">
                            <input type="number" name="pick_sort" autocomplete="off" placeholder="请输入排序，越小越靠前" class="layui-input" value="{$info?$info.pick_sort:''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">按新品排序</label>
                        <div class="layui-input-inline">
                            <input type="number" name="new_sort" autocomplete="off" placeholder="请输入排序，越小越靠前" class="layui-input" value="{$info?$info.new_sort:''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">运费</label>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="text" name="freight" value="{$info?$info.freight:''}" placeholder="￥" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品服务</label>
                        <div class="layui-input-block">
                            {foreach name="service" item="vo"}
                            <input type="checkbox" name="service[]" value="{$vo.id}" title="{$vo.title}" {if isset($info) && $info.service && in_array($vo.id,$info.service)}checked{/if}>
                            {/foreach}
                        </div>
                    </div>

                </div>

                <div class="layui-tab-item">
                    <!-- sku参数表 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">规格：</label>
                        <div class="layui-input-block" style="overflow: auto">
                            <div class="fairy-spec-table"></div>
                        </div>
                    </div>

                    <!-- 动态sku表 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">sku表：</label>
                        <div class="layui-input-block">
                            <div class="fairy-sku-table"></div>
                        </div>
                    </div>

                </div>
                <div class="layui-tab-item">
                    <div class="layui-form-item video" >
                        <label class="layui-form-label">上传视频</label>
                        <div class="layui-input-inline" style="display: flex">
                            <div class="layui-tab-item layui-show" style="width: 300px">
                                <div class="layui-upload-drag uploadVideo" data-token="{$token}" style="padding: 15px;width: 100px">
                                    <i class="layui-icon"></i>
                                    <div>
                                        <hr>
                                        <div class="layui-progress" lay-filter="video">
                                            <div class="layui-progress-bar" lay-percent="0%"></div>
                                        </div>
                                        <input type="hidden" id="video_link" name="video_link" value="" />
                                    </div>
                                </div>
                                <input class="layui-upload-file" type="file" accept="" name="file">
                            </div>
                            <div class="showVideo" id="showVideo" style="padding-left: 10px;">
                                <video src="" controls style="width: 200px;" class="layui-upload-img videoLink"></video>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item " style="display: flex;">
                        <div>
                            <label class="layui-form-label">商品图片</label>
                            <div class="layui-input-block">
                                <input class="layui-upload-file" type="file" name="file">
                            </div>
                        </div>
                        <div class="uploadsPrev">
                            <ul class="layui-upload-list uploadsBtn" imgClass="randUploadImage" inpName="images[]">
                                <li class="w_imgCon">
                                    <img src="/static/admin/images/upload_img.svg">
                                </li>
                            </ul>
                            <ul class="layui-upload-list showImages">
                                {if isset($info)}
                                {foreach name="$info.images" id="v"}
                                <li class="flex-li">
                                    <a href="{$v}" target="_blank"><img class="flex-img" src="{$v}"></a>
                                    <img class="uploadDels" src="/static/admin/images/marketing_delpic.png">
                                    <input type="hidden" name="images[]" value="{$v}" class="uploadInps"/>
                                </li>
                                {/foreach}
                                {/if}
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="layui-tab-item">
                    <div class="layui-form-item ">
                        <label class="layui-form-label">详情</label>
                        <div class="layui-input-block">
                            <textarea name="content_text" placeholder="商品详情，文本" class="layui-textarea">{$info?$info.content_text:''}</textarea>
                        </div>
                    </div>
                    <!--<div class="layui-form-item video" >
                        <label class="layui-form-label">详情视频</label>
                        <div class="layui-input-inline" style="display: flex">
                            <div class="layui-tab-item layui-show" style="width: 300px">
                                <div class="layui-upload-drag uploadVideo2" data-token="{$token}" style="padding: 15px;width: 100px">
                                    <i class="layui-icon"></i>
                                    <div>
                                        <hr>
                                        <div class="layui-progress" lay-filter="video">
                                            <div class="layui-progress-bar" lay-percent="0%"></div>
                                        </div>
                                        <input type="hidden" id="content_videos" name="content_videos" value="{$info?$info.content_videos:''}" />
                                    </div>
                                </div>
                                <input class="layui-upload-file" type="file" accept="" name="file">
                            </div>
                            <div class="showVideo2" id="showVideo2" style="padding-left: 10px;">
                                <video src="{$info?$info.content_videos_url:''}" controls style="width: 200px;" class="layui-upload-img videoLink2"></video>
                            </div>
                        </div>
                    </div>-->

                    <div class="layui-form-item " style="display: flex;">
                        <div>
                            <label class="layui-form-label">详情图片</label>
                            <div class="layui-input-block">
                                <input class="layui-upload-file" type="file" name="file">
                            </div>
                        </div>
                        <div class="uploadsPrev">
                            <ul class="layui-upload-list uploadsBtn" imgClass="randUploadImage"
                                inpName="content_images[]">
                                <li class="w_imgCon">
                                    <img src="/static/admin/images/upload_img.svg">
                                </li>
                            </ul>
                            <ul class="layui-upload-list showImages">
                                {if isset($info)}
                                {foreach name="$info.content_images" id="v"}
                                <li class="flex-li">
                                    <a href="{$v}" target="_blank"><img class="flex-img" src="{$v}"></a>
                                    <img class="uploadDels" src="/static/admin/images/marketing_delpic.png">
                                    <input type="hidden" name="content_images[]" value="{$v}" class="uploadInps"/>
                                </li>
                                {/foreach}
                                {/if}
                            </ul>
                        </div>
                    </div>
                </div>

                <!--{if isset($info)}
                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <label class="layui-form-label">供应链会员</label>
                        <div class="layui-input-block">
                            <input type="text" name="user" value="{$user}" autocomplete="off" class="layui-input" readonly>
                        </div>
                    </div>
                </div>
                {/if}-->

            </div>
        </div>
        <input type="hidden" id="id" name="id" value="<?php if(request()->param(['id'])){echo request()->param(['id']);};?>">
        <input type="hidden" id="uid" name="uid" value="">

        <div class="layui-form-item layui-layout-admin">
            <div class="layui-input-block">
                <div class="layui-footer" style="left: 0;">
                    <div class="layui-footer" style="left: 0;">
                        <a class="layui-btn" lay-filter="saveProduct" lay-submit>保存</a>
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>
</body>
{include file="public/footer" /}
<script type="text/javascript" src="/static/admin/js/uploads.js?v={:time()}"></script>
<script>
    layui.config({
        base: '/static/admin/js/'
    }).use(['form', 'table', 'skuTable'], function () {
        var form = layui.form,
            skuTable = layui.skuTable,
            obj,
            pid = $('#id').val(),

            business_id = 0;

        form.on('select(business_id)', function (data) {
            business_id = data.value;
        })

        //初始化规格
        if (pid) {
            // createSelect($("#cate_3"), '{$info?$info.cate_2:""}');
            createSelect($("#cate_3"), '{$info?$info.cate_2:""}');
            createSkuTable('{$info?$info.cate_3:""}', pid, business_id)
        }
        var cate_1 = $("#cate_1").val();
        if (cate_1) {
            createSelect($("#cate_2"), cate_1)
        }
        form.on('select(cate_1)', function (data) {
            if (data.value) {
                createSelect($("#cate_2"), data.value);
            }
            $("#cate_2").html('<option value="">请选择</option>');
            $("#cate_3").html('<option value="">请选择</option>');
            form.render();
        });
        form.on('select(cate_2)', function (data) {
            if (data.value) {
                createSelect($("#cate_3"), data.value);
            }
            $("#cate_3").html('<option value="">请选择</option>');
            form.render();
        })

        form.on('select(cate_3)', function (data) {
            if (data.value) {
                createSkuTable(data.value, '', business_id)
            } else {
                skuTableRender();
            }
        })


        function createSkuTable(id, pid = '',business_id='') {
            layer.load(2);
            $.ajax({
                type: 'GET',
                url: '{:url("spec/getSpec")}',
                data: {id: id, pid: pid, business_id:business_id},
                dataType: "json",
                success: function (data) {
                    skuTableRender(data.result.specData, data.result.skuData);
                }
            });
        }

        function skuTableRender(data = '', value = '') {
            obj = skuTable.render({
                rowspan: true,
                //上传占位图
                skuIcon: '/static/admin/images/sku-add.png',
                //上传地址
                uploadUrl: "{:url('uploads/uploadImage')}",
                specValueCreateUrl: "{:url('uploads/uploadImage')}",
                //sku表格配置
                skuTableConfig: {
                    thead: [
                        {title: '图片', icon: ''},
                        {title: '原价', icon: 'layui-icon-cols'},
                        {title: 'VIP价格', icon: 'layui-icon-cols'},
                        {title: '库存', icon: 'layui-icon-cols'}
                    ],
                    tbody: [
                        {type: 'image', field: 'icon', value: '', verify: '', reqtext: ''},
                        {type: 'input', field: 'price', value: '0', verify: 'number'},
                        {type: 'input', field: 'vip_price', value: '0', verify: 'number'},
                        {type: 'input', field: 'stock', value: '0', verify: 'number'}
                    ]
                },
                specData: data,
                skuData: value
            });
            layer.closeAll();
        }

        function createSelect(obj, id) {
            $.get('{:url("ProductCate/getCate")}', {id: id},
                function (data) {
                    var options = '<option value="">请选择</option>';
                    $.each(data, function (i) {
                        var selected = obj.attr('data-id') == data[i]['id'] ? 'selected' : '';
                        options += '<option value="' + data[i]['id'] + '" ' + selected + '>' + data[i]['title'] + '</option>';
                    })
                    obj.html(options);
                    form.render();
                }, 'json'
            )
        }

        form.verify();
        form.on('submit(saveProduct)', function (data) {
            // //获取规格数据
            // console.log(obj.getSpecData());
            // //获取表单数据
            // console.log(data.field);
            data.field.specData = obj.getSpecData();
            var state = Object.keys(data.field).some(function (item, index, array) {
                return item.startsWith('skus');
            });
            if (!state) {
                layer.msg('sku表数据不能为空', {icon: 5, anim: 6});
                return false;
            }
            var load = layer.msg('<div><i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop"></i> 加载中....', {
                shade: 0.8,
                time: 99999
            });
            $.ajax({
                type: 'POST',
                url: $("#form").attr('action'),
                data: data.field,
                dataType: "json",
                success: function (data) {
                    layer.close(load);
                    if (data.code == 1) {
                        notify.success(data.msg, 1500, function () {
                            if (window.name != '') {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                                parent.window.location.reload();
                            } else {
                                window.location.reload();
                            }
                        });
                    } else {
                        notify.error(data.msg);
                    }

                }
            });

        });

        table = layui.table;
        mTable_wrap_choose = $('#mTable_wrap_choose');
        $("#choose").on("input", function (e) {
            $(".account_val").val('');
            var value = e.delegateTarget.value;
            if (!value) {
                mTable_wrap_choose.hide();
                return false;
            }
            table.render({
                elem: '#mTable_choose'
                , id: 'mTable_choose'
                , url: '{:url("product/selectUser")}?val=' + value + '&type=get'
                , even: true
                , size: 'sm'
                , cols: [[
                    {field: 'id', title: 'ID'}
                    , {field: 'nickname', title: '昵称'}
                    , {field: 'code', title: '编号'}
                    , {field: 'mobile', title: '手机号'}
                ]]
                , page: true
            });
            mTable_wrap_choose.show();
        });

        //触发行单击事件
        table.on('row(mTable_choose)', function (obj) {
            if (!obj.data.id) return false;
            mTable_wrap_choose.hide();
            $("#code").val(obj.data.code);
            $("#uid").val(obj.data.id);
            $("#choose").val(obj.data.nickname + ' - ' + obj.data.code + ' - ' + obj.data.mobile);
        });
    });
</script>
</html>